前面剛開始介紹CSS時有介紹到3種最基本的選擇器，而今天要介紹的偽類和偽元素其實也是選擇器

什麼是偽類（Pseudo-class）

偽類是一種CSS選擇器，它讓我們選擇不具有特定屬性或狀態的元素，而是基於操作或元素的位置等因素來選擇元素。以下會介紹幾種常用的偽類。

1.:hover

:hover選擇鼠標移到但沒有點擊的元素。這允許我們在滑鼠移到連結或按鈕上時改變其外觀。常見的例子有

• 按鈕效果，用於提醒使用者這個按鈕可以被點選
• 圖片效果，鼠標移動到圖片上，圖片稍微放大
• 超連結，加上hover利用背景顏色配合文字顏色來凸顯

2.:focus

它用於選擇當元素獲得焦點時（通常是通過鍵盤導航）應用樣式的情境。這是一個非常重要的偽類，因為它影響到網頁的可訪問性（accessibility）和用戶互動體驗。

• 表單元素：當使用者使用鍵盤導航在表單元素（如文字輸入框、下拉式清單或按鈕）之間移動時，:focus 用於標示目前獲得焦點的元素。這提供了視覺回饋，讓用戶知道他們正在與哪個表單元素互動。
  -可鍵盤導航的導航菜單：在網站的導航菜單中，當用戶使用鍵盤導航選擇不同的菜單項目時，:focus 可以用於突出顯示當前選定的項目，以增強可訪問性。

3.:active

這個偽類選擇當元素被激活（例如，當按下鼠標按鈕時）的瞬間。

• 按鈕效果：當用戶單擊按鈕時，可以使用 :active 擴展來改變按鈕的外觀，以模擬按下的效果。這通常包括改變按鈕的背景顏色、陰影或文本位置，以提供反饋。
• 連結效果：當用戶點擊連結時，可以使用 :active 擴展來改變連結的外觀，以提供視覺反饋。這通常包括變更連結的文本顏色或下劃線。
• 按鈕組合：:active 可以與 :hover 配合使用，以在用戶懸停和點擊按鈕時分別應用不同的樣式。這增強了互動性並提供更多的視覺反饋。
• 自定義表單元素：input 和 label 等表單元素可以使用 :active 偽類來創建自定義的外觀效果，以指示它們的選擇狀態。

什麼是偽元素（Pseudo-element）

偽元素（Pseudo-element）是CSS中的一個強大概念，它允許你選擇元素的特定部分，而不僅僅是整個元素本身。偽元素通常以::（雙冒號）開頭，並附加到選擇器中。以下是一些常用的偽元素及其示例：

• ::before 和 ::after：
  ::before 和 ::after 偽元素允許你在元素的內容之前或之後插入新的內容，這些內容可以是文本、圖像或其他HTML元素。

p::before {
    content: "“";
}

p::after {
    content: "”";
}

這個例子在每個段落的開頭和結尾插入引號。

• ::first-line：
  ::first-line 偽元素允許你選擇元素的第一行文本，並為其應用特定的樣式。

h1::first-line {
    font-weight: bold;
}

這個例子將文章標題的第一行文本設置為粗體。

• ::first-letter
  ::first-letter偽元素允許你選擇元素的第一個字母，通常用於創建首字下沉效果或其他文本效果。

p::first-letter {
    font-size: 150%;
    color: red;
    text-transform: uppercase;
}

這個示例將段落的第一個字母變成大寫、紅色並增大字號。

• ::selection
  ::selection偽元素允許你為用戶選中的文本部分定義樣式，例如更改選中文本的背景色和文字顏色。

::selection {
    background-color: #007bff; /* 選中文本的背景色 */
    color: #ffffff; /* 選中文本的文字顏色 */
}

這個示例將選中的文本部分的背景色變成藍色，文字變成白色。

總結來說，CSS中的偽類和偽元素為網頁設計師提供了強大的工具，用於精確地選擇和樣式化HTML元素。偽類用於選擇元素的不同狀態，例如懸停或焦點，而偽元素則允許你選擇元素的特定部分，如首字母或內容前後。

通過這些功能，我們可以實現更具互動性和創意性的網頁設計效果，同時提高了網站的可訪問性和用戶體驗。請記住，合理使用偽類和偽元素是設計優雅、易於維護的CSS代碼的關鍵。深入研究這些概念，不斷實踐，將有助於你更好地掌握CSS世界的精髓，並創建出色的網頁設計。